<template>
  <div class="home-swiper"
       @mouseenter="clearInterval"
       @mouseleave="setInterval">
    <!-- 滚动图片区域 -->
    <ul :style="{width: `${1240 * 4}px`}"
        class="swiper-img-box">
      <li v-for="(swiper, index) in swiperList"
          :key="swiper.id">
        <transition enter-active-class="animate__animated animate__fadeIn"
                    leave-active-class="animate__animated animate__fadeOut">
          <router-link v-if="safePage === index"
                       to="">
            <img :src="swiper.imgUrl"
                 class="container"/>
          </router-link>
        </transition>
      </li>
    </ul>
    <div class="layer">
      <!-- 分类组件 -->
      <home-category v-if="!hiddenCate"/>
      <!-- 轮播图切换按钮 -->
      <div class="swiper-option-box">
        <div class="prev"
             @click="safePage--">
          <i class="iconfont icon-angle-left"/>
        </div>
        <div class="next"
             @click="safePage++">
          <i class="iconfont icon-angle-right"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import HomeCategory from '@/components/library/HomeCategory.vue'
import {useSwiperStore} from '@/stores/swiper'
import {storeToRefs} from 'pinia'
import {computed, onBeforeMount, onMounted, ref, toRefs} from 'vue'

onMounted(() => {
  setInterval()
})

onBeforeMount(() => {
  clearInterval()
})

let swiperStore = useSwiperStore()
let {list: swiperList} = storeToRefs(swiperStore)

let props = withDefaults(defineProps<{
  // 是否隐藏分类组件
  hiddenCate?: boolean,
  // 切换的等待时间
  switchTime?: number
}>(), {
  hiddenCate: false,
  switchTime: 1000
})
let {switchTime} = toRefs(props)


// 当前页码
let page = ref<number>(0)
// 用于改变页码的计算属性
let safePage = computed({
  get(): number {
    return page.value
  },
  set(newPage: number): void {
    let pageLength = swiperList.value.length
    page.value = (pageLength + newPage) % pageLength
  }
})


// 定时器
let timeout: number = 0

// 设置定时器
function setInterval():void {
  timeout = window.setInterval(() => {
    safePage.value++
  }, switchTime.value)
}

// 关闭定时器
function clearInterval():void {
  window.clearInterval(timeout)
}
</script>

<style lang="less"
       scoped>
.home-swiper {
  min-height: 500px;
  overflow: hidden;
  position: relative;

  .swiper-img-box {
    position: relative;

    li {
      position: absolute;
      top: 0;
      left: 0;

      img {
        height: 100%;
      }
    }
  }

  .layer {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    .swiper-option-box {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:hover {
        div {
          opacity: 1;
        }
      }

      div {
        transition: all .6s;
        opacity: 0;
        width: 45px;
        height: 45px;
        margin: 0 20px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .2);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        i {
          font-size: 16px;
          color: white;
        }
      }
    }
  }
}
</style>